<template>
    <div ref="container"></div>
</template>

<script setup lang="ts">
import { inject, onMounted, ref, watch } from 'vue'
import { IDate } from '../../interface';
import { Chart } from '@antv/g2';

const p = defineProps<{ data: IDate[] }>()
const container = ref()

const _chart = ref<Chart>()
const chat = inject<string>('chat')

const dayshow = inject<boolean>('dayshow')


const color1 = ref([
    'l(315) 0:#0670F8 1:#34C7FC',
    'l(180) 0:#FCF100 1:#F5A300',
    'l(180) 0:#50FE83 1:#1CDD5E',
])

const color2 = ref([
    'l(180) 0:#FE8B16 1:#F84228',
    'l(180) 0:#FA76B7 1:#FB4099',
    'l(180) 0:#988FF9 1:#6A47C0',

])

const v = ref(2)
const v2 = ref(2)



function getcolor(type: string) {
    if (type === '测评次数') {
        if (v.value === 2) {
            v.value = 0
        } else {
            v.value = v.value + 1
        }
        return color1.value[v.value]

    }
    if (type === '观看视频人数') {
        if (v2.value === 2) {
            v2.value = 0
        } else {
            v2.value = v2.value + 1
        }

        return color2.value[v2.value]

    }
}


onMounted(() => {

    const n = p.data.filter(c => {
        return c.day.length > 4
    }).length > 6

    const chart = new Chart({
        container: container.value,
        autoFit: true,
        height: 300,
        padding: [35, 35, 70, 50],
    });

    chart.data(p.data);
    chart.scale('月均降雨量', {
        nice: true,
    });
    chart.tooltip({
        showMarkers: false,
        shared: true,
    });



    const Interval = chart
        .interval({
            theme: {

            },
            maxColumnWidth: 9,
            dodgePadding: 2,
            columnWidthRatio: 0
        })
        .position('day*count')
        .color('type', (e) => {
            if (e === '观看视频人数') {
                return 'l(180) 0:#FE8B16 1:#F84228'
            } else {
                return 'l(315) 0:#0670F8 1:#34C7FC'
            }
        }

        )
        .adjust([
            {
                type: 'dodge',
                marginRatio: 0,
            },
        ]).style({
            radius: [5, 5, 0, 0]
        }).label('count', {
            style: {
                fill: '#fff',
                fontSize: 8,
                fontWeight: 'lighter'
            }
        })


    chart.interaction('active-region');
    _chart.value = chart

    // console.log(max(p.data.map(e => e.count)) * 1.4)
    _chart.value.scale('count', {
        nice: true
    })
    _chart.value.legend(false)
    chart.render()
})

watch(() => p.data, () => {
    const n = p.data.filter(c => {
        return c.day && c.day.length > 4
    }).length > 6
    if (n) {
        _chart.value?.axis('day', {
            label: null,
            subTickLine: null,
            tickLine: null,
            line: {
                style: {
                    fill: '#CCCCCC',
                    lineDash: [2],
                    fillOpacity: 0.2,
                    stroke: '#CCCCCC',
                    strokeOpacity: 0.2
                }
            },

        });
    } else {
        _chart.value?.axis('day', {
            label: {
                style: {
                    fill: '#fff',
                    fontSize: 9,
                    fontWeight: 'lighter'
                }
            },
            subTickLine: null,
            tickLine: null,
            line: {
                style: {
                    fill: '#CCCCCC',
                    lineDash: [2],
                    fillOpacity: 0.2,
                    stroke: '#CCCCCC',
                    strokeOpacity: 0.2
                }
            }
        });
    }
    _chart.value?.axis('count', {
        grid: {
            line: {
                type: 'line',
                style: {
                    fill: '#CCCCCC',
                    lineDash: [2],
                    fillOpacity: 0.2,
                    stroke: '#CCCCCC',
                    strokeOpacity: 0.2
                }
            }
        },
        label: {
            style: {
                fill: '#fff'
            }
        },
    })

    _chart.value?.changeData(p.data);
    // chart.value?.theme({ "styleSheet": { "brandColor": "#014c63", paletteQualitative10: prop.color, paletteQualitative20: prop.color } });
    // chart.value?.interval()
    //     .position('count')
    //     .color('name', prop.color)
    //     .label('name')
    //     .adjust('stack');
    _chart.value?.render();
})

</script>